<template>
  <div id="login">
    <el-divider content-position="left"
      ><i class="el-icon-collection light-blue-clor" style="font-size: 28px"></i
      >&nbsp;<font style="font-size: 14px" class="light-blue-clor"
        >O(∩_∩)O</font
      ></el-divider
    >

    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item prop="username">
        <el-input
          placeholder="请输入账号"
          prefix-icon="el-icon-user"
          v-model="form.username"
        >
        </el-input
      ></el-form-item>

      <el-form-item prop="password">
        <el-input
          placeholder="请输入密码"
          prefix-icon="el-icon-key"
          v-model="form.password"
          type="password"
        >
        </el-input
      ></el-form-item>

      <el-form-item style="text-align: right">
        <el-button type="text" size="mini" @click="gotoRegister"
          >没有账号?</el-button
        >
        <el-button
          type="primary"
          size="mini"
          round
          :disabled="loginBtnDisabled"
          @click="submitForm"
          v-loading.fullscreen.lock="loading"
          >登录<i class="el-icon-arrow-right"></i
        ></el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "@/util/AxiosUtil.js";
import { Base64 } from "js-base64";
import qs from "qs";
import { URLS } from '@/router';
import storageUtil from '@/util/StorageUtil';
import apis from '@/util/ApiUrls'
export default {
  created() {
    // 谷歌浏览器验证
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };

    return {
      loginBtnDisabled: false,
      loading: false,
      form: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入账号", trigger: "change" },
        ],
        password: [{ validator: validatePass, trigger: "change" }],
      },
    };
  },
  methods: {
    submitForm() {
      const form = this.form;
      const _this = () => this;
      this.$refs["form"].validate((valid) => {
        if (valid) {
          // 加密密码
          const user = { ...form };
          user.password = Base64.encode(user.password);
          // 清空所有缓存
          storageUtil.clear();
          _this().loading = true;
          axios
            .post(apis.api_auth.login + "?" + qs.stringify(user))
            .then((res) => {
              this.loginBtnDisabled = true;
              this.$notify({
                title: "成功",
                message: "登录成功,即将跳转",
                type: "success",
                duration: 700,
                onClose: () => {
                  // 登录状态、用户昵称、默认选中的标签
                  storageUtil.merge({isLogin: true, nickname: res.data, activeIndex: "2"});
                  _this().$router.push({
                    path: URLS.home,
                    name: URLS.homeName,
                    params: {
                      nickname: res.data,
                    }
                  });
                },
              });
            })
            .catch((e) => {
              // 清空存储
              storageUtil.clear()
              const timeout = 1500;
              switch (e.code) {
                case 401:
                  // 未认证-一般不会出现这个错误
                  this.$notify({
                    title: "警告",
                    message: e.msg,
                    type: "warning",
                    duration: timeout,
                  });
                  break;
                case 407:
                  // 用户不存在
                  this.$notify({
                    title: "警告",
                    message: "用户不存在",
                    type: "warning",
                    duration: timeout,
                  });
                  break;
                case 410:
                  // 锁定
                  this.$notify({
                    title: "警告",
                    message: "用户已被锁定",
                    type: "warning",
                    duration: timeout,
                  });
                  break;
                case 411:
                  // 禁用
                  this.$notify({
                    title: "警告",
                    message: "该用户正在等待审批确认中",
                    type: "warning",
                    duration: timeout,
                  });
                  break;
                case 418:
                  // 密码不正确
                  this.$notify({
                    title: "警告",
                    message: "密码不正确",
                    type: "warning",
                    duration: timeout,
                  });
                  break;

                default:
                  this.$notify.error({
                    title: "错误",
                    message: e.msg,
                    duration: timeout,
                  });
                  break;
              }
            })
            .finally(() => {
              _this().loading = false;
            });
        } else {
          return false;
        }
      });
    },
    gotoRegister() {
      this.$router.push({
        name: URLS.registerName,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#login {
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: fixed;
  width: 350px;
  height: 210px;
  border: 1px solid #7ebbf7e5;
  box-shadow: 2px 2px 10px #7ebbf7e5;
  border-radius: 10px;
  padding: 5px;
  background-color: #ffffff;
}
</style>